import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const Login: React.FC = () => {
  const navigate = useNavigate();

  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const [errors, setErrors] = useState({
    username: "",
    password: "",
    general: "",
  });
  const [isLoading, setIsLoading] = useState(false);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));

    if (errors[name as keyof typeof errors]) {
      setErrors((prev) => ({ ...prev, [name]: "" }));
    }
  };

  const validateForm = (): boolean => {
    const newErrors = { username: "", password: "", general: "" };
    let isValid = true;

    if (!formData.username) {
      newErrors.username = "请输入用户名";
      isValid = false;
    }

    if (!formData.password) {
      newErrors.password = "请输入密码";
      isValid = false;
    }

    setErrors(newErrors);
    return isValid;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!validateForm()) return;

    setIsLoading(true);
    setErrors((prev) => ({ ...prev, general: "" }));

    try {
      await new Promise((resolve) => setTimeout(resolve, 1000));

      console.log("登录成功", formData);
      // 存储登陆的用户名
      localStorage.setItem("username", formData.username);
      // 跳转到首页
      navigate("/Layout/Home");
    } catch (error) {
      setErrors((prev) => ({ ...prev, general: "登录失败，请检查账号密码" }));
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="login-container">
      <div className="login-card">
        <div className="logo-container">
          {/* 这里假设logo是本地图片，需替换为实际路径 */}
          <img src="/image/cangchu.png" alt="logo" className="logo" />
          <h1 className="system-title">wms仓储管理系统</h1>
        </div>

        {errors.general && (
          <div className="error-message">{errors.general}</div>
        )}

        <form onSubmit={handleSubmit} className="login-form">
          <div className="form-group">
            <input
              type="text"
              id="username"
              name="username"
              value={formData.username}
              onChange={handleChange}
              placeholder="用户名"
              className={errors.username ? "invalid" : ""}
              disabled={isLoading}
            />
            {errors.username && (
              <span className="field-error">{errors.username}</span>
            )}
          </div>

          <div className="form-group">
            <input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              placeholder="密码"
              className={errors.password ? "invalid" : ""}
              disabled={isLoading}
            />
            {errors.password && (
              <span className="field-error">{errors.password}</span>
            )}
          </div>

          <button type="submit" className="login-button" disabled={isLoading}>
            {isLoading ? "登录中..." : "登录"}
          </button>
        </form>
      </div>
    </div>
  );
};

const style = document.createElement("style");
style.textContent = `
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #ffffff;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  padding: 30px;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.system-title {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group input {
  padding: 12px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s ease;
}

.form-group input::placeholder {
  color: #98a2b3;
}

.form-group input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-group input.invalid {
  border-color: #f87171;
}

.field-error {
  color: #f87171;
  font-size: 12px;
  line-height: 14px;
}

.error-message {
  background-color: #fee2e2;
  color: #dc2626;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
}

.login-button {
  width: 100%;
  padding: 12px 20px;
  background-color: #1677ff;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 10px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  padding: 30px;
  /* 新增卡片样式相关属性 */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.login-button:hover:not(:disabled) {
  background-color: #0d66d0;
}

.login-button:disabled {
  background-color: #a5b4fc;
  cursor: not-allowed;
}
`;
document.head.appendChild(style);

export default Login;
